<template>
    <div id="Login">
        <div class="login_box">
<!--            logo图片-->
            <div class="logo">
                <img src="../assets/images/tan.png" alt="">
            </div>
<!--            登录form-->
            <el-form class="form" :rules="rules" :model="ruleForm" ref="loginFormRef">
                <el-form-item prop="username">
                    <el-input prefix-icon="iconfont icon-yonghu3" v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" prefix-icon="iconfont icon-mima3" v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="submit">提交</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                ruleForm:{
                    username:"",
                    password:""
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger:'blur' }
                    ],
                    password:[
                        { required: true, message:'请输入密码', trigger: 'blur' },
                        { min: 6, max: 12, message:'长度在 6 到 12 个字符', trigger:'blur' }
                    ]
                }
            }
        },
        methods:{
            submit: function () {

                var ruleForm =this.$data.ruleForm;

                this.$refs.loginFormRef.validate(async(bool) => {
                    if (!bool) return false;

                    /*这里省略了axios，后期使用ssm进行开发*/
                    var res = await this.$http.get("http://localhost:9240/getUser?username="+ruleForm.username);
                    var data = res.data;
                    console.log(res);
                    if(data.errCode == 0){
                        // 说明获取了数据
                        if(ruleForm.password == data.data[0].password){
                            this.$message({
                                message: '登陆成功！',
                                type: 'success'
                            });

                            window.sessionStorage.setItem("username",ruleForm.username);

                            this.$router.push("/home");

                        }else{
                            this.$message({
                                message: '密码错误！',
                                type: 'error'
                            });
                        }
                    }else{
                        this.$message({
                            message: '当前用户不存在',
                            type: 'error'
                        });
                    }


                });


            },
            reset(){
                this.$refs.loginFormRef.resetFields();
            }
        }
    }
</script>

<style scoped lang="less">
    #Login{
        box-sizing: border-box;
        height: 100%;
        background-color:#596275;
    }
    .login_box{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 500px;
        height: 400px;
        border-radius: 10px;
        background-color: #ecf2f8;
        .logo{
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 130px;
            height: 130px;
            padding: 10px;
            border-radius: 50%;
            background-color:#fff;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color:#dfe4ea;
            }
        }
    }

    .form{
        margin-top: 100px;
        padding: 30px 80px;
        .btns{
            padding-left: 180px;
        }
    }

</style>
